<template>
	<view>
		<view class="nav">
			<uni-nav-bar :statusBar="true" :border="false" :fixed="false" leftIcon="back" @clickLeft="$tab.back()"
				title="我的收益" background-color="transparent" color="#FFF" />

			<view class="flex items-center flex-col justify-around px-32 pb-16"
				style="height: calc(100% - var(--status-bar-height) - 44px)" v-if="list.length > 0">
				<view class="text-FFF flex items-center flex-col">
					<view class="text-48 font-700">
						{{income}}
					</view>
					<view class="mt-8 text-36">
						{{list[selectIndex].moneyName}}
					</view>
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="" style="height: 422rpx;">

		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="" style="height: 382rpx;">

		</view>
		<!-- #endif -->


		<view class="p-32">
			<u-scroll-list indicatorActiveColor="#FE6A38" indicatorColor="#FFEAE3" indicatorWidth="0">
				<view v-for="(item, index) in list" :key="index" class="box-1 text-center mr-32 font-700" :style="{
					background:index === selectIndex ? 'linear-gradient( 180deg, #FF561D 33%, #FF0064 100%)' : '#FFEAE3',
					color:index === selectIndex ? '#FFF' : '#6C6C6C'
				}" @click="changeSelect(index)">
					{{item.moneyName}}
				</view>
			</u-scroll-list>
		</view>

		<view class="px-20">
			<view class="mb-32 text-40 font-700">
				明细
			</view>

			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="" v-for="(item,index) in detailList" :key="index">
					<view class="item">
						<view class="flex justify-between items-center">
							<text class="text-36 " style="max-width: 450rpx;">{{item.useRemark}}</text>
							<text class="text-36 font-700" :style="{color:item.payment==1 ? '#02CE8A' : '#FF912A'}">
								{{item.payment==1 ? '+'+item.amount : '-'+item.amount}}
								{{list[selectIndex].moneyName == '金豆' ? '个' : ''}}
							</text>
						</view>
						<view class="flex justify-between items-center mt-20">
							<text class=" text-gray">{{item.createTime}}</text>
							<text class=" text-gray">余额：{{item.balance}}
								{{list[selectIndex].moneyName == '金豆' ? '个' : ''}}</text>
						</view>
					</view>
					<u-divider></u-divider>
				</view>
			</s-pull-scroll>
		</view>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						moneyId: 1,
						moneyName: '加速收益'
					},
					{
						moneyId: 2,
						moneyName: '分红收益',
					},
					{
						moneyId: 3,
						moneyName: '管理津贴',
					},
					{
						moneyId: 4,
						moneyName: '服务津贴',
					}
				],
				loading: false,
				selectIndex: 0,
				detailList: [],
				income:null
			};
		},
		onLoad() {
			this.refresh()
		},
		onShow() {},
		methods: {
			changeSelect(index) {
				this.selectIndex = index
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.detailList = [];
					}

					const res = await this.$Api.index.getMyIncome({
						sign: this.list[this.selectIndex].moneyId,
						pageSize: 10,
						pageNum: pullScroll.page
					})

					console.log(res, '货币记录')
					
					this.income = res.income

					this.detailList = this.detailList.concat(res.data.rows || []);
					if (this.detailList.length == 0) {
						pullScroll.empty()
					}

					if (this.detailList.length >= res.data.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		width: 100%;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/money-bg.png) no-repeat;
		background-size: 100% 100%;
		/* #ifdef MP-WEIXIN */
		height: 422rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		height: 384rpx;
		/* #endif */

		.nav-btn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
		}

		.btn1 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg1.png) no-repeat;
			background-size: 100% 100%;
		}

		.btn2 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg2.png) no-repeat;
			background-size: 100% 100%;
		}

		.btn3 {
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/btn-bg3.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.box-1 {
		width: 178rpx;
		height: 80rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		line-height: 80rpx;
		min-width: 178rpx;
	}

	.convert-wrap {
		width: 686rpx;
		height: 892rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/img_fabuqiugou@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 386rpx 0 34rpx 0;

		.box-2 {
			width: 622rpx;
			background: #FCF8F4;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4EEDE;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
			}
		}

		.box-3 {
			width: 240rpx;
			height: 80rpx;
			background: #E8E2E0;
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 80rpx;
		}

		.box-4 {
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		}
	}
</style>